import { TextFieldEntry } from '@bpmn-io/properties-panel'
import { useService } from 'bpmn-js-properties-panel'
import { jsx } from '@bpmn-io/properties-panel/preact/jsx-runtime'
export default function (element) {
  return {
    id: 'operationName',
    element: element,
    component: Entity
  }
}

function Entity(props) {
  const { element } = props
  const modeling = useService('modeling')
  const translate = useService('translate')
  const debounce = useService('debounceInput')
  const getValue = () => {
    return element.businessObject.operationName || ''
  }

  const setValue = (value) => {
    return modeling.updateProperties(element, {
      operationName: value
    })
  }
  return jsx(TextFieldEntry, {
    element: element,
    id: 'OperationEntity',
    description: translate('current operation button name'),
    label: translate('button name'),
    getValue: getValue,
    setValue: setValue,
    debounce: debounce
  })
}
